<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>

  <meta charset="utf-8"/>
  <meta name="author" content=""/>
  <meta name="keywords" content=""/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>

  <script src="/js/jquery.min.js"></script>
  <script src="/js/bootstrap.js"></script>
  <link rel="stylesheet" href="/css/bootstrap.css"/>
</head>
<body>
<h3 style="text-align: center; padding: 10px;">用户列表展示</h3>
<hr style="margin: 0"/>
<div class="container">
  <table class="table table-bordered table-striped" style="margin-bottom: 0">
    <thead>
    <tr>
      <th>id</th>
      <th>username</th>
      <th>password</th>
      <th>age</th>
      <th>role</th>
      <th>loginDate</th>
    </tr>
    </thead>
    <tbody id="table_content">
    <tr th:each="user : ${data.list}">
      <td th:text="${user.id}">1</td>
      <td th:text="${user.username}">1</td>
      <td th:text="${user.password}">2</td>
      <td th:text="${user.age}">3</td>
      <td th:text="${user.role}">4</td>
      <td th:text="${#dates.format(user.loginDate, 'yyyy-MM-dd HH:mm:ss')}">5</td>
    </tr>
    </tbody>
  </table>


  <nav aria-label="Page navigation" style="text-align: center">
    <ul class="pagination">
      <li>
        <a th:href="@{/list(pageNum=${data.prePage})}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li th:each="num : ${data.navigatepageNums}" th:class="${num eq data.pageNum ? 'active' : ''}">
        <a th:href="@{/list(pageNum=${num})}" th:text="${num}">1</a>
      </li>
      <li>
        <a th:href="@{/list(pageNum=${data.nextPage})}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
</body>
</html>